<template>
	<view class="classify">
		<view>
		  <view class="top">
		    <view class="search">
		      <view class="search_in">
		        <image src="../../static/search.png"></image>
		        <input type="text" placeholder="请输入搜索内容"/>
		      </view>
		    </view>
		  </view>
		</view>
		
		<scroll-view class="scrollarea" scroll-y type="list">
		  <view class="cates">
		    <view class="cates_container">
		      <!-- 左侧菜单 -->
		      <scroll-view scroll-y class="left_menu">
		        <view :class="item.id===currentId?'menu_item  active':'menu_item' " v-for="item in categoryData"  :key="item.id" @click="changeId(item.id)">{{item.category_name}}</view>
		      </scroll-view>
		      <!-- 右侧内容 -->
		      <scroll-view scroll-y class="right_content">
		        <block v-for="item in goodsData" :key="item.id">
		          <view class="view_tupian_wenzi" @click="jumpGid(item.id)">
		            <image class="image_1" :src="urls.baseURL+item.thumb" />
		            <view class="view_wenzi2">
						<text style="font-size: 40rpx;">{{item.goods_name}}</text>
		                <text class="text_small">{{item.descr}}</text>
					    <text style="color: red;">￥{{item.show_price}}</text>
		            </view>
					<image class="shopBtn" src="@/static/shopBtn.png"></image>
		          </view>
		        </block>
		      </scroll-view>
		    </view>
		  </view>
		
		</scroll-view>
	</view>
	
</template>

<script setup lang="ts">
	import {ref} from "vue"
	import {onShow,onHide} from "@dcloudio/uni-app";
	import { getCategory,getGoods} from "@/api/api";
	import urls from "@/api/url";
	let  currentId=ref(0);
	const categoryData= ref<CategoryData[]>([]);
	const goodsData= ref<GoodsData[]>([]);
	const changeId=async(id:number)=>{
		currentId.value=id;
		const result=await getGoods({page:1,limit:10,cid:currentId.value});
		goodsData.value=( result.data as DataRes<GoodsData[]>).data;
	}
	onShow(async ()=>{
		try {
			const pid =await uni.getStorageSync('pid');
			if (pid!==undefined) {
				uni.showToast({
					title: '数据获取成功',
					duration: 1000
				});
				const res=await getCategory({page:1,limit:10,pid:pid});
				categoryData.value =( res.data as DataRes<CategoryData[]>).data ;
				categoryData.value.sort((a,b)=>a.sort-b.sort);
				currentId.value=categoryData.value[0].id;
				const result=await getGoods({page:1,limit:10,cid:currentId.value});
				goodsData.value=( result.data as DataRes<GoodsData[]>).data;
			}else{
				uni.showToast({
					title: '数据获取失败',
					duration: 1500,
					icon:"error"
				});
			}
		} catch (e) {
		}
	})
	onHide(()=>{goodsData.value=[]})
	const jumpGid=(gid:number)=>{
		uni.navigateTo({
			url:"/pages/detail/detail?gid="+gid
		})
	}
</script>

<style>
.classify{
	 height: 100vh;
	  display: flex;
	  flex-direction: column;
	  background-image: linear-gradient(to bottom, #FFF0BA 2%, #fff 100%);
}
	    
	    .search {
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      height: 90rpx;
	      /* background-color: rgb(236, 236, 236); */
	    }
	    .search .search_in {
	      display: flex;
	      align-items: center;
	      justify-content:space-between;
	      padding:0 20rpx ;
	      box-sizing: border-box;
	      height: 70rpx;
	      width: 710rpx;
	      background-color: #ffffff;
	      border-radius: 35rpx;
	    }
	    .search_in image {
	      height: 45rpx;
	      width: 45rpx;
	    }
	    .search input {
	      width: 600rpx;
	    }
	    .search_in {
	      height: 55rpx;
	      width: 110rpx;
	      border-radius: 55rpx;
	      background-color: #6cd3ff;
	      color: #0c0c0c;
	      text-align: left;
	      line-height: 55rpx;
	      cursor: pointer;
	    }
	    
	    
	    .scrollarea {
	      flex: 1;
	      overflow-y: hidden;
	    }
	    
	    .nx_swipper swiper {
	      width: 750rpx;
	      height: 400rpx;
	    }
	    
	    .nx_swipper swiper image {
	      width: 750rpx;
	      height: 400rpx;
	    }
	    .cates{
	      height: 100%;
	    
	    }
	    .cates .cates_container{
	      display: flex;
	      margin-top: 20rpx;
	    }
	    .cates .cates_container .left_menu{
	      flex-grow: 2;
	    }
	    .cates .cates_container .left_menu .menu_item{
	      height: 80rpx;
	      width: 122rpx;
	      font-size: 30rpx;
		  line-height: 80rpx;
	    }
	    .cates .cates_container .left_menu .active{
	      color: orange;
	      border-left: 5rpx solid currentColor;
	    }
	    .cates .cates_container .right_content{
	      flex: 5;
	    }
	    .goods_list{
	      display: flex;
	      flex-wrap: wrap;
	    }
	    .goods_list .navigator{
	      text-align: center;
	      padding: 15rpx;
	    }   
		/* 包裹图片和两行文字 */
		
		.view_tupian_wenzi {
		  height: 300rpx;
		  display: flex;
		  flex-direction: row;
		  align-items: center;
		  
		  /* 圆角 */
		  border-radius: 20rpx;
		
		  /* 边 */
		/*  border: 3rpx solid #E0E3DA; */
		  
		
		  background-color: #ffffff;
		  margin: 10rpx;
		
		  /* padding使得文字和图片不至于贴着边框 */
		  padding: 10rpx;
		  position: relative;
		}
		
		/* 图片 */
		
		.image_1 {
		  width: 400rpx;
		  height: 260rpx;
		}
		
		/* 包裹两行文字 */
		
		.view_wenzi2 {
		  width: 100%;
		  margin-left: 25rpx;
		  display: flex;
		  flex-direction: column;
		}
		
		/* 小字 */
		
		.text_small {
		  font-size: 30rpx;
		  word-break: break-all;
		  color: #7a7878;
		  margin-top: 10rpx
		}
		.shopBtn{
			float: right;
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			bottom: 34rpx;
			right: 10rpx;
			border-radius:16rpx;
		}
</style>
